<template>
  <div class="activation_box">
    <div class="activation_condition">
      <div class="items">
        <div class="label">{{$t('m.userNumber')}}</div>
        <Input type="text" class="ivu-input-w200" v-model="allocationObj.userId" :placeholder="$t('m.userNumber')" />
      </div>
      <div class="items">
        <div class="label">{{$t('m.shoujihao')}}</div>
        <Input type="text" class="ivu-input-w200" v-model="allocationObj.phone" :placeholder="$t('m.shoujihao')" />
      </div>
      <div class="items">
        <div class="label">{{$t('m.uSta')}}</div>
        <Select v-model="allocationObj.statusLoan" class="ivu-input-w200" :placeholder="this.$t('m.uSta')">
          <Option :value="''">{{$t('m.entire')}}</Option>
          <Option  v-if="countryName=='PHH'" :value="'unWithdraw'">{{$t('m.fàngkuǎnwèitíxiàn')}}</Option>
          <Option :value="'none'">{{$t('m.zhùcèwèishēnqǐng')}}</Option>
          <Option :value="'repaid'">{{$t('m.jiéqīngwèifùjiè')}}</Option>
        </Select>
      </div>
      <div class="items">
        <div class="label">{{$t('m.fēnpèizhuàngtài')}}</div>
        <Select v-model="allocationObj.allotStatus" class="ivu-input-w200" :placeholder="this.$t('m.fēnpèizhuàngtài')">
          <Option :value="''">{{$t('m.entire')}}</Option>
          <Option :value="'0'">{{$t('m.wèifēnpèi')}}</Option>
          <Option :value="'1'">{{$t('m.fēnpèi')}}</Option>
        </Select>
      </div>
      <div class="items">
        <div  v-if="countryName=='VN'" class="label">{{$t('m.registeTime')}}</div>
        <div  v-if="countryName=='PHH'" class="label">{{$t('m.registeTime')}}/{{$t('m.ClosingTime')}}/{{$t('m.fàngkuǎnshíjiān')}} </div>
        <DatePicker type="daterange" format="yyyy-MM-dd" :options="disDate" ref="allocationAllotTime" @on-change="loginTimeChange" v-bind:placeholder="$t('m.registeTime')" class="ivu-input-w200"></DatePicker>
      </div>
    </div>
    <div style="margin-top:10px;">
      <Button class="parameter_button" style="margin-right:30px;" @click="emptyQueryAllocation">{{$t('m.recycle')}}</Button>
      <Button class="parameter_button" type="primary" @click="queryAllocation">{{$t('m.cháxún')}}</Button>
      <Button class="parameter_button" style="float:right;" icon="ios-add-circle-outline" type="primary" disabled v-if="!allocationSelectData.length">{{$t('m.fēnpèi')}}</Button>
      <Button class="parameter_button" style="float:right;" icon="ios-add-circle-outline" type="primary" v-else @click="allocationEvent()">{{$t('m.fēnpèi')}}</Button>
      <Button class="parameter_button" style="float:right;margin-right:10px;" icon="ios-alarm" disabled type="warning" v-if="!allocationInfData.length">{{$t('m.tōngzhī')}}</Button>
      <Button class="parameter_button" style="float:right;margin-right:10px;" icon="ios-alarm" type="warning" v-else @click="getInformEvent()">{{$t('m.tōngzhī')}}</Button>
    </div>
    <div class="activation_table">
      <Table :columns="allocationTable" :data="allocationData.list" @on-selection-change="allocationSelectTable" :loading="allocationLoading">
        <template slot-scope="{ row, index }" slot="action">
          <Button type="success" size="small" class="ivu-btn-success ivu-btn-long ivu-btn-small" @click="getBankInfo(row.userId)">{{$t('m.userDetails')}}</Button>
        </template>
      </Table>
    </div>
    <div class="activation_page">
      <Page :total="allocationData.size" :current.sync="activationPages" :page-size-opts="[1, 10, 20, 40, 80, 100]" show-total show-elevator show-sizer @on-change="tabTwoWritePage" @on-page-size-change="tabTwoClickPage" style="margin: 15px 0;"></Page>
    </div>
    <!--用户详细资料end-->
    <Modal v-model="baseInfoBox" class="baseInfo_box_title" :title="$t('m.sUI')" width="70%">
      <base-info :userId="UserId" :orderGid="null" baseType="" v-if="baseInfoBox"></base-info>
      <div slot="footer"></div>
    </Modal>

    <!-- 分配初级人员 -->
    <Modal v-model="allocationStaffBox" :title="this.$t('m.fēnpèirényuán')" @on-ok="allocationStaffOk" @on-cancel="">
      <h4 style="  display: inline;  margin: 35px;">{{$t('m.selectZhipai')}}</h4>
      <Select v-model="allocationStaffSelectData" style="width:60%;margin:auto;" v-bind:placeholder="$t('m.selectZhipai')">
        <Option v-for="item in allocationStaffDataList" :value="item.id" :key="item.account">{{ item.account }}</Option>
      </Select>
    </Modal>
    <!-- 通知用户 -->
    <Modal v-model="allocationInformBox" :title="this.$t('m.tōngzhī')" @on-ok="allocationInformOk" @on-cancel="">
      <h4 style="text-align: center;">{{$t('m.quèdìngyàotōngzhīma')}}?</h4>
    </Modal>
  </div>
</template>

<script>
import BaseInfo from '@/components/common/baseInfo'
export default {
  name: 'customerActivation',
  data () {
    return {
      countryName:'',
      allocationInformBox: false,
      allocationInfData: [],
      allocationLoading: false,
      allocationStaffDataList: [],
      allocationStaffSelectData: '',
      allocationStaffBox: false,
      allocationSelectData: [],
      baseInfoBox: false,
      activationPages: 1,
      allocationObj: {
        'pageNumber': 1,
        'pageSize': 10
      },
      statusLoanObj: {
        'none': this.$t('m.zhùcèwèishēnqǐng'),
        'repaid': this.$t('m.jiéqīngwèifùjiè'),
      },
      allocationTable: [
        {
          type: 'selection',
          width: 60,
          fixed: 'left',
          align: 'center'
        },
        {
          title: this.$t('m.uSta'),
          width: 200,
          align: 'center',
          key: 'statusLoan',
          render: (h, param) => {
            return h("div", this.statusLoanObj[param.row.statusLoan]);
          }
        },
        {
          title: this.$t('m.time'),
          width: 200,
          align: 'center',
          key: 'registerRepaidDate'
        },
        {
          title: this.$t('m.dayNum'),
          width: 200,
          align: 'center',
          key: 'unappliedDays'
        },
        {
          title: this.$t('m.userNumber'),
          width: 200,
          align: 'center',
          key: 'userId'
        },
        {
          title: this.$t('m.shǒujīhào'),
          width: 200,
          align: 'center',
          key: 'phone'
        },
        {
          title: this.$t('m.xingming'),
          width: 200,
          align: 'center',
          key: 'fullName'
        },
        {
          title: this.$t('m.fēnpèizhuàngtài'),
          width: 200,
          align: 'center',
          key: 'allotStatus',
          render: (h, param) => {
            return h("div", param.row.allotStatus == 1 ? this.$t('m.fēnpèi') : this.$t('m.wèifēnpèi'));
          }
        },
        {
          title: this.$t('m.shàngcìtōngzhīshíjiān'),
          width: 200,
          align: 'center',
          key: 'notificationTime',
        },
        {
          title: this.$t('m.operate'),
          slot: 'action',
          width: 150,
          fixed: 'right',
          align: 'center'
        }
      ],
      allocationDataInfo: {},
      allocationData: {
        size: 1,
      },
      disDate: {
        disabledDate (date) {
          return date && date.valueOf() > Date.now();
        }
      },
    }
  },
  components: {
    BaseInfo
  },
  props: {},
  watch: {},
  methods: {
    allocationInformOk () {
      if (this.allocationInfData) {
        this.$http.post('/api/laocai/operation/activeAllot/notice', this.allocationInfData).then((res) => {
          if (res.body.code == 0) {
          }
          this.allocationInfData = []
          this.$Message.success(this.$t('m.tōngzhī') + this.$t('m.errorCode' + res.body.code));
          setTimeout(() => {
            this.queryAllocation()
          }, 1000);
        }, error => { });
      } else {
        this.$Message.error(this.$t('m.selectZhipai'));
      }
    },
    allocationEvent () {
      this.queryServiceStaff(),
        this.allocationStaffBox = true,
        this.allocationStaffSelectData = ''
    },
    allocationStaffOk () {
      if (this.allocationStaffSelectData) {
        this.$http.post('/api/laocai/operation/activeAllot/save', {
          userIds: this.allocationSelectData,
          accountId: this.allocationStaffSelectData
        }).then((res) => {
          if (res.body.code == 0) {
          }
          this.allocationSelectData = []
          this.$Message.success(this.$t('m.fēnpèi') + this.$t('m.errorCode' + res.body.code));
          setTimeout(() => {
            this.queryAllocation()
          }, 1000);
        }, error => { });
      } else {

        this.$Message.error(this.$t('m.selectZhipai'));
      }

    },

    queryServiceStaff () {

      let url = '/api/laocai/sys/account/list?roleName=service'
      this.$http.get(url).then((res) => {
        if (res.body.code == 0) {
          this.allocationStaffDataList = res.body.result.list
        } else {
          this.allocationStaffDataList = []
        }

      });
    },

    // 选择admin表格选择初审人员数据
    allocationSelectTable (selection) {
      this.allocationSelectData = []
      this.allocationInfData = []
      for (const key in selection) {
        this.allocationSelectData.push(selection[key].userId)
        this.allocationInfData.push({ 'id': selection[key].userId, 'userStatus': selection[key].statusLoan })
      }
    },
    getInformEvent () {
      this.allocationInformBox = true
    },
    getBankInfo (userId, orderGid) {
      this.baseInfoBox = true
      this.UserId = userId
      this.baseInfoOrderGid = orderGid
    },
    // 修改页数
    tabTwoWritePage (index) {
      this.allocationObj.pageNumber = index
      this.queryAllocation()
    },
    // 修改每页条数
    tabTwoClickPage (index) {
      this.allocationObj.pageSize = index
      this.queryAllocation()
    },

    emptyQueryAllocation () {
      this.allocationObj = {
        'pageNumber': 1,
        'pageSize': 10
      }
      this.$refs.allocationAllotTime.handleClear()
      this.queryAllocation()
    },
    // tab请求数据
    queryAllocation () {
      this.allocationLoading = true
      let param = {},
        query = '';
      param.userId = this.allocationObj.userId
      param.phone = this.allocationObj.phone
      param.statusLoan = this.allocationObj.statusLoan
      param.allotStatus = this.allocationObj.allotStatus

      param.pageNumber = this.allocationObj.pageNumber
      param.pageSize = this.allocationObj.pageSize

      param.startDate = this.allocationObj.startDate
      param.endDate = this.allocationObj.endDate
      Object.keys(param).forEach((item, index) => {
        if (param[item]) {
          query += `${index === 0 ? '' : '&'}${item}=${param[item]}`;
        }
      });
      let url = `/api/laocai/operation/activeAllot/list?${query}`
      this.$http.get(url).then((res) => {
        if (res.body.code == 0) {
          this.allocationData = res.body.result          
          this.allocationData.list.forEach(element => {
            if (element.allotStatus==1) {
              element._disabled=true
            }
          });
        } else {
          this.allocationData = {}
        }
        this.$Message.success(this.$t('m.errorCode' + res.body.code));
        setTimeout(() => {
          this.allocationLoading = false
        }, 500);
      });
    },
    loginTimeChange (e) {
      if (typeof (e) == "undefined") {
        this.assignedDateBegin = e[0];
      } else if (typeof (e) == "object") {
        this.allocationObj.startDate = e[0];
        this.allocationObj.endDate = e[1];
      }
    },
  },
  filters: {},
  computed: {},
  created () { },
  mounted () {    
    this.countryName = localStorage.getItem("x-countryName")
    this.queryAllocation()
  },
  destroyed () { }
}
</script>

<style  lang="scss" scoped>
@import "../../static/style.css";
@import "../../static/common.scss";
.activation_box {
  padding: 15px;
  .activation_condition {
    // margin-top: 20px;
    .items {
      display: inline-block;
      margin-bottom: 10px;
      margin-right: 20px;
      width: 200px;
      .label {
        overflow: hidden;
        white-space: inherit;
        text-align: right;
        color: #222;
        font-size: 14px;
        margin-right: 10px;
      }
    }
  }
  .activation_table {
    margin-top: 25px;
    .ivu-btn-long {
      margin: 6px 0;
    }
  }
  .activation_page {
    float: right;
  }
}
.shenTong_tab_item {
  // background: red;
  margin-top: 20px;
  .item_Col {
    // background: #fff;
    text-align: center;
    .item_Col_box {
      height: 160px;
      margin: 12px;
      padding: 19px 30px;
      background: #f0f2f5;
      p {
        text-align: left;
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(34, 34, 34, 1);
      }
      span {
        font-size: 45px;
        font-family: PingFang-SC-Heavy, PingFang-SC;
        font-weight: 800;
        color: rgba(34, 34, 34, 1);
      }
    }
  }
}
</style>
